<template>
	<view :style="{'--color': color,'--color_aid': color_aid}">
		<template >
			<view >
				<view class="flex-box flex-center align-center youTitle">
					<text class="toLeft"></text>
					<text class="toLeft"></text>
					<view>{{title}}</view>
					<text class="toRight"></text>
					<text class="toRight"></text>
				</view>
				<view style="padding: 0 24rpx;" >
					<view class="my-box ">
						<view class="left-box" v-if="goodsLeftList.length">
							<view class="repeatGoodsList">
								<view v-for="(item, index) in goodsLeftList" :key="index" 
								    @click="toGoods(item.goods_id)" 
									class="my-goods-box" :class="'goods-'+item.goods_id">
									<image :src="item.img?imgUrl + item.img:''" mode="aspectFill" 
									       :style="{'height':336*item.img_proportion+'rpx'}" 
										   class="goodImg" :data-name="item.name" :data-id="item.goods_id" 
										   @error='onImageLoad' 
										   @load="onImageLoad"></image>
									<view class="goods-box-msg">
										<view class="thmeTxt lines2 hisGoodsName2">
											<text v-if='item.type == 1' class="speTag">特价</text>
											<text v-if='item.type == 2' class="speTag">团购</text>
											{{item.name}}
										</view>
										
										<view class="profitTitle_ lines" v-if='item.profitTitle'>
											<text>{{ item.profitTitle }}</text>
										</view>
										<view class="prices flex-box flex-between">
											<view class="priceNow">
												<text class="price myPrice">{{item.type == 2?item.open_group_price:item.price}}</text>
												<template v-if='(item.type == 1 || item.type == 0) && parseFloat(item.price) != parseFloat(item.full_price)'>
													<text class="priceReg myPrice">{{item.full_price}}</text>
												</template>
												<template v-if='item.type == 2 && parseFloat(item.full_price) != parseFloat(item.open_group_price)'>
													<text class="priceReg myPrice">{{item.full_price}}</text>
												</template>
											</view>
											
										</view>
										
									</view>
									<view class="maskObtained" v-if='item.state == 0'>
										<image :src="staticUrl+'/images/Obtained.png'" class="icon-obtained"></image>
									</view>
								</view>
							</view>
						</view>
						<view class="right-box" v-if="goodsRightList.length">
							<view class="repeatGoodsList">
								<view v-for="(item, index) in goodsRightList" :key="index" @click="toGoods(item.goods_id)" class="my-goods-box" :class="'goods-'+item.goods_id">
									<image :src="item.img?imgUrl + item.img:''" mode="aspectFill" 
									       :style="{'height':336*item.img_proportion+'rpx'}"  
										   class="goodImg" :data-name="item.name" :data-id="item.goods_id"  
										   @error='onImageLoad' @load="onImageLoad"></image>
									<view class="goods-box-msg">
										<view class="thmeTxt lines2 hisGoodsName2">
											<text v-if='item.type == 1' class="speTag">特价</text>
											<text v-if='item.type == 2' class="speTag">团购</text>
											{{item.name}}
										</view>
										
										<view class="profitTitle_ lines" v-if='item.profitTitle'>
											<text>{{ item.profitTitle }}</text>
										</view>
										<view class="prices flex-box flex-between">
											<view>
												<view class="priceNow">
													<text class="price myPrice">{{item.type == 2?item.open_group_price:item.price}}</text>
													<template v-if='(item.type == 1 || item.type == 0) && parseFloat(item.price) != parseFloat(item.full_price)'>
														<text class="priceReg myPrice">{{item.full_price}}</text>
													</template>
													<template v-if='item.type == 2 && parseFloat(item.full_price) != parseFloat(item.open_group_price)'>
														<text class="priceReg myPrice">{{item.full_price}}</text>
													</template>
												</view>
											</view>
										
										</view>
										
									</view>
									<view class="maskObtained" v-if='item.state == 0'>
										<image :src="staticUrl+'/images/Obtained.png'" class="icon-obtained"></image>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</template>
	</view>
</template>

<script>
	export default {
		name:'recommend',
		props:['pageData','title'],
		data() {
			return {
				color: getApp().globalData.color,
				color_aid: getApp().globalData.color_aid,
				imgUrl: this.imgUrl,
				staticUrl: this.staticUrl,
				goodsList: [],
				goodsListCount:0, //加载第i张图片
				goodsLeftList:[], // 左侧商品列表
				goodsLeftListHeight: 0,
				goodsRightList: [], // 右侧商品列表
				goodsRightListHeight: 0,
			}
		},
		methods: {
		
			onImageLoad: function(e){
				
				let that = this;
				let rImgH = 0;
				var goodsId = 'goods-' + e.target.dataset.id;
				uni.createSelectorQuery().in(this).select("."+goodsId).boundingClientRect(function(data) {
					
					rImgH += data.height
					if(that.goodsListCount==0){
						that.goodsLeftListHeight += rImgH;//第一张图片高度加到goodsLeftListHeight 
						that.goodsListCount++;
						if(that.goodsList[that.goodsListCount]) that.goodsRightList.push(that.goodsList[that.goodsListCount]);
						//添加第二张图片到goodsRightList数组，因为第一张已经初始化到左侧列表中
					}else{
						that.goodsListCount++;
						if(that.goodsLeftListHeight > that.goodsRightListHeight){//把图片的高度加到目前高度更低的栏中
							that.goodsRightListHeight += rImgH;
						}else{
							that.goodsLeftListHeight += rImgH;
						}
						if(that.goodsListCount<that.goodsList.length){//根据目前的栏高，把下一张图片，push到低的那栏
							if(that.goodsLeftListHeight > that.goodsRightListHeight){
								that.goodsRightList.push(that.goodsList[that.goodsListCount]);
							}else{
								that.goodsLeftList.push(that.goodsList[that.goodsListCount]);
							}
						}
					}
				}).exec()
			},
		},
		watch:{
			pageData:{
				deep:true,
				immediate:true,
				handler(newVal){
					
					if(!newVal.length) return;
					let that = this;
					if(this.goodsList.length == newVal.length) return;
					that.goodsList = newVal;
					that.goodsLeftList = [];
					that.goodsRightList = [];
					that.goodsLeftList.push(newVal[0])
				}
			}
			
		}
	}
</script>

<style lang="scss" scoped>

</style>
